<script setup>
import { useRoute } from 'vue-router';
import router from '@/router';
const route = useRoute();
</script>

<template>
    <div class="container">
        <el-container style="height: 100%">
            <el-header>
                <div class="header-container">
                    <div class="title">
                        <h3>全国交通咨询</h3>
                    </div>
                </div>
            </el-header>
            <el-container style="height: 100%">
                <el-aside width="200px" style="height: 100%">
                    <el-menu class="el-menu-vertical-demo" router :default-active="route.path">
                        <el-menu-item index="/main/admin">
                            <span>管理页面</span>
                        </el-menu-item>
                        <el-menu-item index="/main/user">
                            <span>规划页面</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main style="height: 100%">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="less">
html, body {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    height: 100%;
}

.el-header {
    border-bottom: 1px solid #dad8d8;
    background-color: #ffffff;
}

.el-aside {
    height: 100%;
}

.el-main {
    height: 100%;
}

.header-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-btn {
        margin-right: 20px;
        border: none;
        font-size: 16px;
        color: black;
        border-radius: 0%;
    }

    .user-btn-active {
        border-bottom: 1px solid black;
    }
}
</style>
